/*
 * @Author: zhangxin
 * @Date: 2020-10-15 14:56:51
 * @Last Modified by: zhangxin
 * @Last Modified time: 2021-08-06 11:12:07
 *
 * 时间筛选框
 * 可直接托管form
 * dateType:range(范围选择)/date(日期选择)
 */

import React, { useState, useEffect, Fragment } from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';

const { RangePicker } = DatePicker;

const HcpTimerFilterSelect = (props) => {
    const {
        dateType = 'range',
        showTime = false,
        format = 'YYYY/MM/DD',
        onChange,
        value,
        defaultValue = '',
        id = 'timerFilterSelect',
        allowClear = false,
        style,
        ...prop
    } = props;

    const [timeValue, setTimeValue] = useState('');
    const [isChange, setIsChange] = useState(false);
    useEffect(() => {
        if (isChange) {
            setIsChange(false);
            return;
        }
        if (value) {
            if (typeof value == 'object') {
                setTimeValue([
                    moment.isMoment(value.startTime)
                        ? value.startTime
                        : moment(value.startTime),
                    moment.isMoment(value.endTime)
                        ? value.endTime
                        : moment(value.endTime),
                ]);
            } else if (typeof value == 'string') {
                setTimeValue(moment.isMoment(value) ? value : moment(value));
            }
        } else {
            setTimeValue('');
        }
    }, [value]);

    useEffect(() => {
        if (defaultValue) {
            setTimeValue(
                moment.isMoment(defaultValue)
                    ? defaultValue
                    : moment(defaultValue)
            );
        }
    }, [defaultValue, id]);

    const onRangeChange = (dates, dateString) => {
        setTimeValue(dates);
        setIsChange(true);
        if (onChange)
            onChange({
                startTime: dateString[0],
                endTime: dateString[1],
            });
    };
    const onDateChange = (date, dateString) => {
        setTimeValue(date);
        setIsChange(true);
        if (onChange) onChange(dateString);
    };
    return (
        <Fragment>
            {dateType == 'range' && (
                <RangePicker
                    {...prop}
                    showTime={showTime}
                    format={format}
                    allowClear={allowClear}
                    value={timeValue}
                    onChange={onRangeChange}
                    style={{ ...style }}
                />
            )}
            {dateType == 'date' && (
                <DatePicker
                    format={format}
                    showTime={showTime}
                    allowClear={allowClear}
                    {...prop}
                    value={timeValue}
                    onChange={onDateChange}
                    style={{ ...style }}
                />
            )}
        </Fragment>
    );
};

export default HcpTimerFilterSelect;
